<template>
  <view>
    <view class="good-list-box">
      <my-good-item v-for="item in goodList"
                 :key="item.goods_id"
                 :good-data="item">
      </my-good-item>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 商品列表
        goodList: [],
        // 关键字
        query: '',
        // 分类id
        cid: '',
        // 当前页
        page: 1,
        // 每页数量
        pageSize: 10,
        // 总数量
        total: 0,
        // 节流阀，防止页面反复触发触底更新，只有在上一次触发请求完成才能发起新的请求
        isLoading: false
      };
    },
    onLoad(options) {
      this.query = options.query || ''
      this.cid = options.cid || ''
    },
    mounted() {
      this.getGoodList()
    },
    // 触发上拉加载时调用
    onReachBottom() {
      // 如果当前正在加载新数据，则不重复触发
      if (this.isLoading)
        return
      // 如果当前页计算数量大于等于total，没有下一页了
      if (this.page * this.pageSize >= this.total) {
        uni.$showError('没有更多了')
        return
      }
      this.page++
      this.getGoodList()
    },
    // 触发下拉刷新时调用
    async onPullDownRefresh() {
      // 如果当前正在加载新数据，则不触发下拉刷新
      if (this.isLoading)
        return
      this.page = 1
      this.total = 0
      this.goodList = []
      // 同步等待数据加载
      await this.getGoodList()
      // 数据加载结束后，关闭下拉刷新动画
      uni.stopPullDownRefresh()
    },
    methods: {
      /**
       * 获取商品列表
       */
      getGoodList() {
        this.isLoading = true
        return uni.$http.get('goods/search', {
          query: this.query,
          cid: this.cid,
          pagenum: this.page,
          pagesize: this.pageSize
        }).then(res => {
          let data = res.data
          if (data.meta.status !== 200)
            return uni.$showError()
          this.goodList = [...this.goodList, ...data.message.goods]
          this.total = data.message.total
          this.isLoading = false
        })
      }
    }
  }
</script>

<style lang="scss">
  .good-list-box {
    padding: 0 10rpx;
  }
</style>
